<template>
	<view class="container">
		<view id="input">
			
			<view class="inputItem">
				<uni-easyinput type="number" v-model="data.cost" placeholder="请输入价格" maxlength="9"></uni-easyinput>
			</view>
			<view class="inputItem">
				<uni-easyinput type="text" v-model="data.tips" placeholder="请输入备注" maxlength="20"></uni-easyinput>
			</view>
			<view class="inputItem">
				<uni-datetime-picker :value="data.date" type="date" @change="seleteDate"></uni-datetime-picker>
			</view>
			
			
		</view>
		<view class="seleteIcons">
		    <radio-group class="icon" @change="radioChange">
				<label class="radio" v-for="(item,index) in iconName">
					<radio :value="values[item]" :checked="index===current">
						<view class="iconItem">
							<view :class="item"></view>
							<view class="text">{{tips[item]}}</view>
						</view>
					</radio>
				</label>
			</radio-group>
		</view>
		<view class="submit">
			<button @click="handleSubmit" :disabled="login">提交</button>
		</view>
	</view>
</template>

<script>
	import ShowIcon from "./showIcon.vue"
	export default{
		props:{
			status:Object
		},
		data(){
			const currentDate=this.today()
			const name=this.classNames()
			let i=this.status.iconList.length
			let l=!getApp().globalData.login
			let op=getApp().globalData.userData.openid
			return{
				data:{
					type:"",
					cost:"",
					out:this.status.out,
					date:"",
					year:"",
					month:"",
					tips:"",
					openid:op
				},
				date:currentDate,
				iconName:name,
				current:i,
				login:l,
				tips:{
					"t-icon t-icon-food":"餐饮",
					"t-icon t-icon-clothes":"服饰",
					"t-icon t-icon-traffic":"交通",
					"t-icon t-icon-qita":"其他",
					"t-icon t-icon-play":"娱乐",
					"t-icon t-icon-study":"学习",
					"t-icon t-icon-jianzhi":"兼职",
					"t-icon t-icon-shenghuofei":"生活费",
					"t-icon t-icon-touzi":"投资",
					"t-icon t-icon-tuikuan":"退款",
					"t-icon t-icon-hongbao":"红包",
					"t-icon t-icon-jiangjin":"奖金",
				},
				values:{
					"t-icon t-icon-food":"food",
					"t-icon t-icon-clothes":"clothes",
					"t-icon t-icon-traffic":"traffic",
					"t-icon t-icon-qita":"qita",
					"t-icon t-icon-play":"play",
					"t-icon t-icon-study":"study",
					"t-icon t-icon-jianzhi":"jianzhi",
					"t-icon t-icon-shenghuofei":"shenghuofei",
					"t-icon t-icon-touzi":"touzi",
					"t-icon t-icon-tuikuan":"tuikuan",
					"t-icon t-icon-hongbao":"hongbao",
					"t-icon t-icon-jiangjin":"jiangjin",
				},
			}
			
		},
		components:{
			ShowIcon
		},
		methods:{
			today(){
				let date=new Date;
				let res={};
				res.year=date.getFullYear();
				res.month=date.getMonth()+1;
				res.date=date.getDate();
				console.log(`${res.year.toString()}-${res.month.toString()}-${res.date.toString()}`)
				return `${res.year.toString}-${res.month.toString()}-${res.date.toString()}`
			},
			classNames(){
				
				const res=this.status.iconList.map((i)=>"t-icon t-icon-"+i);
				console.log(res)
				return res
			},
			radioChange(event){
				this.data.type=event.detail.value
				for(let i=0;i<this.status.iconList.length;i++){
					if(this.status.iconList[i]===event.detail.value){
						this.current=i
						console.log(this.current)
					}
				}
				console.log(this.data.type)
				console.log(event)
			},
			seleteDate(event){
				this.data.date=event
				let info=event.split("-")
				console.log(info)
				this.data.month=info[1]
				this.data.year=info[0]
				console.log(this.data)
				console.log(this.data.year)
				console.log(this.data.month)
			},
			clearData(){
				
				this.data={
					type:"",
					cost:"",
					out:this.status.out,
					date:"",
					year:"",
					month:"",
					tips:"",
				}
				this.current=this.status.iconList.length
				console.log(this.current)
			},
			checkInfo(){
				let x;
				for(x in this.data){
					console.log(x)
					if(x!=="out"){
						if(this.data[x]===""){
							return false
						}
					}
				}
				return true
			},
			async handleSubmit(){
				if(!this.checkInfo()){
					uni.showToast({
						title:"信息不完整",
						icon:"error"
					})
				}else{
					uni.showModal({
						content:"你确认要提交记录吗?",
						success:async (res)=>{
							if(res.confirm){
								let result=await uniCloud.callFunction({
									name:"putData",
									data:{data:this.data}
								})
								getApp().globalData.listData.unshift(this.data);
								console.log(getApp().globalData.listData)
								console.log(result)
								console.log(this.data)
					            this.clearData()
							}
						}
					})
					
				}
			},
		}
	}
</script>

<style lang="scss">
	.container{
		#input{
			margin: 20rpx;
			height:300rpx ;
			.inputItem{
				margin: 25rpx 40rpx;
				uni-easyinput{
					background-color: #FFFFFF;
				}
			}
			}
			.seleteIcons{
				margin: 10rpx;
			.icon{
				display: inline-block;
				
				.iconItem{
					margin: 40rpx;
					.text{
						text-align: center;
					}
				}
			}
				
		}
		.submit{
			margin: 40rpx;
		}
		}
		
</style>
